<script setup lang="ts">
import { reqAttr } from "@/api/product/attr";
import {
  AttrValueList,
  BaseSaleAttr,
  SaleAttrValue,
  SaleAttrValueList,
  SkuData,
  SpuData,
  SpuImage,
  SpuSaleAttr,
} from "@/api/product/spu/type.ts";
import { ref } from "vue";
import {
  reqSpuImageList,
  rqeSpuSaleAttrList,
  reqSaveSkuInfo,
} from "@/api/product/spu";
import { ElMessage } from "element-plus";

let $emit = defineEmits(["updateScene"]);

let imageList = ref<SpuImage[]>([]); // spu图片列表

let hasAttrList = ref<SpuSaleAttr[]>([]); // 已经添加的销售属性列表

let attrListAll = ref<BaseSaleAttr[]>([]); // 所有销售属性列表

let table = ref<any>(); // 表格

// sku数据
let skuParams: SkuData = ref({
  category3Id: 0, // 三级分类id
  spuId: 0, // 商品id
  tmId: 0, // 品牌id
  skuName: "", // sku名称
  price: "", // 价格
  weight: "", // 重量
  skuDesc: "", // sku描述
  skuAttrValueList: [], // sku平台属性
  skuSaleAttrValueList: [], // sku的销售属性
  skuDefaultImg: "", // sku默认图片
});

// 提交
const submit = async () => {
  // 整理数据
  // 收集平台属性
  let attrArr = attrListAll.value.reduce(
    (pre: AttrValueList, item: BaseSaleAttr) => {
      // 判断是否有值
      if (item && item.attIdAndValueId) {
        // 有值就收集
        pre.push({
          attrId: item.attIdAndValueId.split(":")[0],
          valueId: item.attIdAndValueId.split(":")[1],
        });
      }
      // 返回收集后的数组
      return pre;
    },
    [],
  );

  // 收集销售属性
  let saleAttrArr = hasAttrList.value.reduce(
    (pre: SaleAttrValueList, item: SaleAttrValue) => {
      // 判断是否有值
      if (item && item.attIdAndValueId) {
        // 有值就收集
        pre.push({
          saleAttrId: item.attIdAndValueId.split(":")[0],
          saleAttrValueId: item.attIdAndValueId.split(":")[1],
        });
      }
      // 返回收集后的数组
      return pre;
    },
    [],
  );

  skuParams.value.skuAttrValueList = attrArr; // 收集平台属性
  skuParams.value.skuSaleAttrValueList = saleAttrArr; // 收集销售属性

  // 发送请求

  let resukt = await reqSaveSkuInfo(skuParams.value);
  // 成功或者失败的回调
  if (resukt.code === 200) {
    // 切换场景
    $emit("updateScene", 0, false);
    // 提示用户
    ElMessage.success("添加成功");
  } else {
    // 提示用户
    ElMessage.error("添加失败");
  }
};

// 取消
const cancel = () => {
  $emit("updateScene", 0, false);
};

// 初始化数据
const initData = async (
  category1Id: number,
  category2Id: number,
  row: SpuData,
) => {
  skuParams.value.category3Id = row.category3Id; // 三级分类id
  skuParams.value.spuId = row.id; // 商品id
  skuParams.value.tmId = row.tmId; // 品牌id

  await getAttrList(category1Id, category2Id, row.category3Id); // 获取平台属性
  await getSpuImageList(row.id); // 获取某一个spu的图片列表
  await getSpuSaleAttrList(row.id); // 获取某一个spu的销售属性列表
};

// 获取平台属性
const getAttrList = async (c1Id: number, c2Id: number, c3Id: number) => {
  let result = await reqAttr(c1Id, c2Id, c3Id);
  if (result.code === 200) {
    attrListAll.value = result.data;
  }
};

// 获取某一个spu的图片列表
const getSpuImageList = async (SpuId: number) => {
  let resultSpuImageList = await reqSpuImageList(SpuId);
  if (resultSpuImageList.code === 200) {
    imageList.value = resultSpuImageList.data;
  }
};

// 获取某一个spu的销售属性列表
const getSpuSaleAttrList = async (SpuId: number) => {
  let resultSpuSaleAttrList = await rqeSpuSaleAttrList(SpuId);
  if (resultSpuSaleAttrList.code === 200) {
    hasAttrList.value = resultSpuSaleAttrList.data;
  }
};

// 设置为默认图片
const setDefaultImg = (row: SpuImage) => {
  skuParams.value.skuDefaultImg = row.imgUrl; // 收集默认图片
  table.value.clearSelection(); // 清空选中的行
  table.value.toggleRowSelection(row, true); // 选中当前行
};

defineExpose({
  initData,
});

// 定义组件名称
defineOptions({
  name: "SkuForm",
});
</script>

<template>
  <el-form label-width="100px" v-model="skuParams">
    <el-form-item label="sku名称">
      <el-input v-model="skuParams.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="skuParams.price"></el-input>
    </el-form-item>
    <el-form-item label="重量">
      <el-input v-model="skuParams.weight"></el-input>
    </el-form-item>
    <el-form-item label="sku描述">
      <el-input type="textarea" v-model="skuParams.skuDesc"></el-input>
    </el-form-item>
    <el-form-item label="平台属性" v-model="skuParams.skuAttrValueList">
      <el-form inline label-width="80px">
        <el-form-item
          v-for="attr in attrListAll"
          :label="attr.attrName"
          class="inner-form"
        >
          <!--    暂时没有地方收集，可以将值收集在对象本身的一个属性身上      -->
          <el-select v-model="attr.attIdAndValueId" filterable>
            <el-option
              v-for="item in attr.attrValueList"
              :key="item.attrId"
              :label="item.valueName"
              :value="`${attr.id}:${item.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性" v-model="skuParams.skuSaleAttrValueList">
      <el-form inline label-width="80px">
        <el-form-item
          v-for="hasAttr in hasAttrList"
          :label="hasAttr.saleAttrName"
          class="inner-form"
        >
          <el-select v-model="hasAttr.attIdAndValueId" filterable>
            <el-option
              v-for="spuSaleAttrValue in hasAttr.spuSaleAttrValueList"
              :key="spuSaleAttrValue.id"
              :label="spuSaleAttrValue.saleAttrValueName"
              :value="`${hasAttr.id}:${spuSaleAttrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片">
      <el-table ref="table" border class="inner-table" :data="imageList">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="图片">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.imgUrl"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="图片名称">
          <template #default="scope">
            <el-tag>
              {{ scope.row.imgName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="setDefaultImg(row)" type="warning" size="small"
              >设置为默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="submit" type="primary">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.inner-form,
.inner-table {
  margin: 10px 0;
}
</style>
